<template>
  <div class="wp-card__product">
    <div v-for="(product, index) in list" :key="product.productCode">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-tooltip :content="product.productName" placement="top">
            <div class="header_title">{{ product.productName }}</div>
          </el-tooltip>
          <div>
            <el-button
              size="mini"
              style="float: right"
              type="success"
              @click.native="save(index, product)"
              >确定</el-button
            >
            <el-button
              size="mini"
              style="float: right; margin-right: 5px"
              @click.native="cancel(index, product)"
              >取消</el-button
            >
          </div>
        </div>
        <el-form
          status-icon
          :model="product"
          :ref="index"
          label-width="80px"
          :rules="rules"
          class="wp-card-form"
        >
          <el-form-item label="入库数量" prop="productNum">
            <el-input-number
              class="size"
              size="mini"
              :min="1"
              :autosize="{ minRows: 2, maxRows: 4 }"
              v-model="product.productNum"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              class="size"
              type="textarea"
              v-model="product.remark"
              placeholder="备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockProductCard',
  props: {
    list: Array,
    lableInfo: {
      type: Object,
      default: () => {
        return {
          numLable: '数量',
          priceLable: '价格'
        }
      }
    }
  },
  watch: {
    list: {
      handler (val) {
        this.$emit('update:list', val)
      },
      deep: true,
      immediate: true
    }
  },
  components: {},
  data () {
    return {
      rules: {
        productNum: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    cancel (index, row) {
      // this.list.splice(index, 1)
      this.$emit('cancel', row)
    },
    save (index, row) {
      this.$refs[index][0].validate((valid) => {
        if (valid) {
          this.$emit('save', row)
        }
      })
    },
    calculation (product, key) {
      product.totalAmount =
        Math.round(product.actualPrice * product.productNum * 100) / 100
      product.discountTotalAmount =
        Math.round(
          product.actualPrice *
            product.productNum *
            (product.discountRate || 1) *
            100
        ) / 100
      return product[key]
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-card__product {
  width: 100%;
  height: 240px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  justify-content: space-between;
}

.wp-card-form > .el-form-item {
  margin-bottom: 20px;
}
.size{
    width: 180px;
}
>>> .el-card__header {
  padding: 8px 10px;
}
>>> .el-card__body {
  padding: 5px;
}

.box-card {
  width: 300px;
  height: 230px;
  overflow: auto;
  margin: 5px;
}

.clearfix {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .header_title {
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
